<template>
  <Layout>
    <NavBar :rollback="true" icon-name="left" to-path="labels">编辑标签</NavBar>
    <Item field-name="标签名" :tag="tag" @tagEdit="getNewTagName" class="note"/>
    <div class="btn-wrap">
      <Button @click.native="changeTagName">保存标签</Button>
      <Button @click.native="delTag">删除标签</Button>
    </div>
  </Layout>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import Item from '@/components/labels/Item.vue';

type Tag = {
  'id': string
  'tagName': string
}
@Component({
  components: {Item},

})
export default class LabelItem extends Vue {

  tag!: Tag;
  id!: string;
  tagList: Tag[] = this.$store.state.tagsList;

  created() {
    this.id = this.$route.params.id;
    /* eslint-disable */
    this.tag = this.tagList.filter((t: Tag) => t.id === this.id)[0];
  }

  delTag() {
    if (confirm(`请确认是否删除【${this.tag.tagName}】标签`)) {
      this.$store.commit('delTag', this.id);
      this.$store.commit('saveTagsList');
      this.$router.push('/labels');
    }
  }

  changeTagName() {
    this.$store.commit('changeTagName', this.tag);
    this.$store.commit('saveTagsList');
    this.$router.push('/labels');
  }

  getNewTagName(newTag: { 'id': string, 'tagName': string }) {
    this.tag = newTag;
  }
}
</script>

<style lang="scss" scoped>
.note {
  background-color: #fff;
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .3);
}

.btn-wrap {
  padding: 24px;
  display: flex;
  justify-content: space-around;
}
</style>